<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <script src="./js/jquery-3.6.0-min.js"></script>
    <script src="./layer/layer.js"></script>
</head>
<body>
<form action="">
    <table>
        <h4>修改密码</h4>
        <table>
            <tr><td>用户名：</td>
            <td><input type="text" name="username"></td></tr>
            <tr>
                <td>旧密码：</td>
                <td><input type="password" name="oldPassword"></td>
            </tr>
            <tr>
                <td>新密码：</td>
                <td><input type="password" name="newPassword"></td>
            </tr>
            <tr>
                <td>再次输入新密码：</td>
                <td><input type="password" name="rNewPassword"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" name="submit" value="修改密码"><a href="./index.html">返回首页</a></td>
            </tr>
        </table>
    </table>
</form>
</body>
<script>
// 把名字从本地里取出来
var name=window.localStorage.getItem('name')
$('[name="username"]').val(name)
$('form').on('submit',function(){
    var oldPassword=$('[name="oldPassword"]')
    var newPassword=$('[name="newPassword"]')
    var rNewPassword=$('[name="rNewPassword"]')

    // 密码校验
    var reg=/^\w{6,12}$/
    if(!reg.test(oldPassword.val())){
        layer.msg('旧密码不符合规范',{
            time:1000,
            icon:2
        });
        return false
    }
    if(!reg.test(newPassword.val())){
        layer.msg('新密码不符合规范',{
            time:1000,
            icon:2
        });
        return false
    }
    if(!reg.test(rNewPassword.val())){
        layer.msg('再次输入的新密码不符合规范',{
            time:1000,
            icon:2
        });
        return false
    }
    if(newPassword.val() !==rNewPassword.val()){
        layer.msg('两次密码不一致',{
            time:1000,
            icon:2
        });
        return false
    }
     // 发送Ajax
     var xhr=new XMLHttpRequest;
    xhr.open('post','/api/editpsd')
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(`username=${name}&oldPassword=${oldPassword.val()}&newPassword=${newPassword.val()}&rNewPassword=${rNewPassword.val()}`)
    xhr.onreadystatechange=function(){
        if(xhr.readyState===4){
            if(xhr.status>=200&&xhr.status<300){
                var res=xhr.responseText;
                res=JSON.parse(res)
                console.log(res)
                if(res.code===1){
                    layer.msg(res.msg,{
                        icon:1,
                        time:1500
                    },()=>{
                        window.localStorage.removeItem('name')
                        window.localStorage.removeItem('userInfo')
                        location.href='../login.html'
                    })
                }else{
                    layer.msg(res.msg,{
                        icon:1,
                        time:1500
                    },()=>{
                        $('[name="oldPassword"]').val('')
                        $('[name="newPassword"]').val('')
                        $('[name="rNewPassword"]').val('')
                    })
                    return false
                }
               
            }

        }
    }
    return false
})
</script>
</html>